<template>
	<view>
		<view class="activity">

			<view class="activityImg">
				<image :src="data.courses.pic" mode="">
				</image>
			</view>
			<view class="activityText">
				<view class="name">
					{{data.courses.title}}
				</view>
				<view class="label">
					<view class="">
						{{data.courses.school_title}}
					</view>
					<view class="">
						{{data.courses.applicable}}
					</view>
					<view class="">
						{{data.courses.pattern}}
					</view>
				</view>
				<view class="money">
					￥{{data.courses.price}}
				</view>
			</view>
<!-- 			<view class="activityBtn">
				<view class="">
					<view class="pin">
						拼
					</view>
					<view class="kan">
						砍
					</view>
				</view>
			</view> -->
			<view class="time">
				上课时间：{{data.courses.time_a}} - {{data.courses.time_b}}  {{data.courses.time_en}} {{data.courses.time_s}} {{data.courses.time_s_en}}
			</view>
		</view>

		<view class="personnel">
			<view class="personnelItem" v-for="(item ,index) in data.retreat" :key="index">
				<view class="time">
					{{item.time}}
				</view>
				<view class="personnelMessage">
					<view class="headImg">
						<image :src="item.baby.pic" mode="">
						</image>
					</view>
					<view class="text">
						<view class="">
							<view class="name">
								{{item.baby.user}}
							</view>
							<view class="money">
								实付款{{item.price_pay}}￥
							</view>
						</view>
						<view class="">
						总课数{{item.count.count_s}}	已上{{item.count.count_a}}节，请假{{item.count.truancy_count}}节，补课{{item.count.count_b}}节
						</view>
					</view>
				</view>

				<view class="btn" @click="esc(item)">
					退课
				</view>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: false,
				item:{},
				data:{}
			}
		},
		onLoad(e) {
			this.item=JSON.parse(e.item)
			this.newData()
		},
		methods: {
			newData(){
				this.$myRuquest('home/merchants/courses_retreat',{cour_id:this.item.id}).then(res=>{
					if(res.code==400){
						this.data=res.data
						this.data.courses.time_a = this.$util._date_time(+this.data.courses.time_a * 1000)
						this.data.courses.time_b = this.$util._date_time(+this.data.courses.time_b* 1000)
						this.data.retreat.forEach(item=>{
							item.time=this.$util._date_time(+item.time* 1000)
						})
					}
				})
			},
			esc(item){
				let that=this
				uni.showModal({
				    title: '提示',
				    content: '是否确认退课？',
				    success: function (res) {
				        if (res.confirm) {
				            that.$myRuquest('home/merchants/courses_drop',{order_id:item.order_id},'POST').then(res=>{
				            	if(res.code==400){
				            		that.$refs.uToast.show({
				            			title: res.msg,
				            			type: 'success'
				            		})
				            	}else{
												that.$refs.uToast.show({
													title: res.msg
												})
											}
				            })
				        }
				    }
				});
			
			}
		}
	}
</script>

<style lang="less">
	.time {
		font-size: 24upx;
		color: #77787e;
		margin: 10upx 0;
	}

	.activity {
		// display: flex;
		position: relative;
		margin-bottom: 20upx;
		width: calc(100vw - 40upx);
		margin: 20upx;

		.activityImg {
			width: 120upx;
			height: 120upx;
			border-radius: 12upx;
			overflow: hidden;
			display: inline-block;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.activityText {
			margin: 0 20upx;
			width: 460upx;
			display: inline-block;

			.name {
				font-weight: 900;
			}

			.label {
				display: flex;
				font-size: 20upx;
				margin: 14upx 0;
				color: #767676;

				view {
					flex: 1;
				}


			}

			.money {
				color: rgb(248, 95, 0);
				font-weight: 900;
			}
		}

		.activityBtn {
			position: absolute;
			right: 0;
			height: 100%;
			display: inline-block;

			>view:nth-child(1) {
				display: flex;
				font-size: 18upx;
				color: #fff;


				view {
					width: 30upx;
					height: 30upx;
					line-height: 30upx;
					border-radius: 4upx;
					text-align: center;
					margin-left: 20upx;
				}

				.pin {
					background: linear-gradient(to bottom right, rgb(254, 162, 120), rgb(253, 61, 93));

				}

				.kan {
					background: linear-gradient(to bottom right, rgb(254, 188, 128), rgb(254, 153, 47));
				}
			}
		}

	}

	.personnel {
		padding: 20upx;

		.personnelItem {
					position: relative;
			.personnelMessage {
				display: flex;
				padding-bottom: 60upx;
				border-bottom: 2upx solid #F1F1F1;
				.headImg {
					width: 100upx;
					height: 100upx;
					margin-right: 10upx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;

					}

				}

				.text {
					margin-top: 10upx;
					width: calc(100vw - 150upx);

					view:nth-child(1) {
						display: flex;

						.name {
							font-weight: 900;
							flex: 1;

						}

						.money {
							font-weight: 900;
							color: rgb(248, 95, 0);
							flex: 1;
							text-align: right;
						}
					}

					>view:nth-child(2) {
						font-size: 24upx;
						color: #a1a1a1;
						margin-top: 10upx;
					}

				}
			}

			.btn {
				width: 100upx;
				height: 40upx;
				line-height: 40upx;
				color: #fff;
				text-align: center;
				border-radius: 8upx;
				background-color: rgb(248, 95, 0);
				position: absolute;
				right: 10upx;
				bottom: 20upx;
			}
		}
	}

	.title {
		font-weight: 900;
		margin: 20upx;
	}
</style>
